<template>
<div>
    <div class="main-content"> 
        <div class="title"> 上栗县烟花爆竹非法生产举报 </div>
        <div class="title-red">非法生产 人人喊打</div>
    </div>
<div class="form-content">
  <el-form ref="ruleForm" :rules="rules" :model="formData" label-width="300px"  class="custom-form" label-position="left">
    <el-form-item prop="address" label="隐患地点(必填)" class="mt-10">
      <el-input
        v-model="formData.address"
        data-prop="address"
        data-mode="en"
        placeholder="请输入隐患地点"
        type="textarea"
        rows="4"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="username" label="姓名(选填)" class="mt-10">
      <el-input
        v-model="formData.username"
        data-prop="username"
        data-mode="en"
        placeholder="请输入姓名"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="mobile" label="手机号码(选填)" class="mt-10">
      <el-input
        v-model="formData.mobile"
        data-prop="mobile"
        data-mode="en"
        placeholder="请输入手机号码"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="pic" label="图片上传(选填)" class="mt-10">
      <el-input
        v-model="formData.pic"
        data-prop="pic"
        data-mode="en"
        placeholder="请输入图片"
        clearable
      >
      </el-input>

      <!-- <el-input type="file" name="file" value="" @change="changepath"/> -->
      <el-upload
      ref="uploadRef"
      :show-file-list="false"
      class="upload-demo"
      action=""
      :multiple="false"
      :before-upload="beforeupload"
      :auto-upload="false"
      :on-change="handleChange"
      :data="picData"
      
    >
      <el-button size="small" type="primary" class="btn">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <div class="tip-red shift-top">备注:图片大小控制在5M以内。</div>
    <el-form-item prop="video" label="视频上传(选填)" class="mt-10">
      <el-input
        v-model="formData.video"
        data-prop="video"
        data-mode="en"
        placeholder="请输入视频"
        clearable
      />
    

    <!-- <el-input type="file" name="file" value="" @change="changepath"/> -->
    <el-upload
    ref="uploadVideoRef"
    :show-file-list="false"
    class="upload-demo"
    action=""
    :multiple="false"
    :before-upload="beforeupload"
    :auto-upload="false"
    :on-change="handleChangeVideo"
  >
    <el-button size="small" type="primary" class="btn">点击上传</el-button>
    </el-upload>


    </el-form-item>
    <div class="tip-red shift-top">备注:视频大小控制在300M以内。</div>
    <div class="tip-red mt-30">备注：视网络情况，点击“立即提交”后请稍候片刻会有“提交成功”提示，不要重复点击提交按钮。</div>
  </el-form>
  <el-button @click="confirm" type="primary" class="btn">立即提交</el-button>
</div>
<!-- <SourceList :dialog-visible="dialogVisible" :table-data="sourceData" :total="total" @updateDialog="updateDialog" @getTableData="getTableData"/> -->
</div>
</template>

<script setup>

import { reactive, ref } from 'vue'
import {uploadUser} from '@/api/demo'


const uploadRef = ref()
const uploadVideoRef = ref()

const ruleForm = ref(null)
const formData = reactive({ address: '', username: '', mobile: '',  pic: '', video: '' })
const rules = {
    address: [{ required: true, message: '请输入隐患地点', trigger: 'blur' }],
    // username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    // mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    // pic: [{ required: true, message: '请输入图片', trigger: 'blur' }],
    // video: [{ required: true, message: '请输入视频', trigger: 'blur' }],
}
const picData = ['JPG', 'JPEG', 'PNG']
const picRawData = ref()

const videoRawData = ref()

const videoData = {
  type: 'VIDEO' //上传文件类型为视频
}
const dialogVisible = ref(false)

const sourceData = ref([])

const total = ref(0)

function updateDialog(visible){

  dialogVisible.value = visible
  formData.address = ''
  formData.username = ''
  formData.mobile = ''
  formData.pic = ''
  formData.video = ''

  picRawData.value = ''
  videoRawData.value = ''
}


function changepath(event){
      const files = event.target.files
      if(files.length > 0){
        console.log('file:', files)
        this.name = files[0].name
        console.log('name:', this.name)
        this.formData.file = files[0]
      }
    }
// 阻止upload的自己上传，进行再操作
function handleChange(file, fileList) {
  console.log('file', file)
  if(!file.raw.type.includes('image/')){
    ElMessage({
              message: '请选择图片类型',
              type: 'error',
            })
    return
  }
  const maxSize = 5*1024*1024
  if(file.size > maxSize){
    ElMessage({
              message: '选择图片大小不能大于5M',
              type: 'error',
            })
    return
  }
  picRawData.value = file.raw
  // formData.pic = URL.createObjectURL(file.raw)

  formData.pic = file.name
}
function handleRemove(file, fileList) {
    picRawData.value = file.raw
    formData.pic = ''
}

function handleChangeVideo(file, fileList) {
  console.log('uploadVideoRef.value', uploadVideoRef.value)
  console.log('file', file)
  if(!file.raw.type.includes('video/')){
    ElMessage({
              message: '请选择视频类型',
              type: 'error',
            })
    return
  }
  const maxSize = 300*1024*1024
  if(file.size > maxSize){
    ElMessage({
              message: '选择视频大小不能大于300M',
              type: 'error',
            })
    return
  }
  videoRawData.value = file.raw
  // formData.pic = URL.createObjectURL(file.raw)
  formData.video = file.name
}
function handleRemoveVideo(file, fileList) {
  videoRawData.value = ''
  formData.video = ''
}
function beforeupload(file) {
  console.log('beforeupload file:', file)
  return true
}
function confirm() {
  if (ruleForm.value) {
    ruleForm.value.validate((valid) => {
      if (valid) {
        const data = {
          address: formData.address,
           username: formData.username, 
           mobile: formData.mobile,  
           pic: picRawData.value, 
           video: videoRawData.value
        }
        uploadUser(data).then((res) => {
          console.log('res:', res)
          if(res.code == 0){
            ElMessage({
              message: res.message || '提交成功',
              type: 'success',
            })
          
          } else {
            ElMessage({
              message: res.message || '提交失败',
              type: 'error',
            })

          }
        })
      }
    })
  }
}
</script>

<style scoped>
.custom-form .el-input {
  --el-input-width: 100%;
 
}
:deep(.el-input--large .el-input__inner ){
  --el-input-inner-height: 48px !important;
}
:deep(.el-form-item){
  display: block;
}

.main-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.form-content{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.title {
  height: 50px;
  line-height: 50px;
   font-size: 25px;
    color: black;
    font-weight: 600;
  }
  .title-red{
    
  height: 50px;
  line-height: 50px;
    font-size: 30px;
    color: red;
  }
  .tip-red{
    font-size: 15px;
    color: red;
  }
  .btn {
    height: 40px;
    font-size: 20px;
    width:auto;
    margin: 10px 10px;
  }
  .shift-top {
    margin-top: 0px;
  }
  .mt-10 {
    margin-top: 20px;
  }
  .mt-30 {
    margin-top: 30px;
  }
</style>